<template>
  <div class="productDetail">
    <div class="title">{{ title }}</div>
    <div class="price">
      <div class="flexbox">
        <span class="cont">
          <span class="yen">¥</span>
          <span class="num">{{ price }}</span>
          <span class="per">起/人</span>
        </span>
        <span class="cont child-price">
          <span class="desc">儿童价</span>
          <span class="yen">¥</span>
          <span class="num">{{ childrenPrice }}</span>
          <span class="per">起/人</span>
        </span>
      </div>
      <div class="selled-count">
        {{ sellCount }}人已出行
      </div>
    </div>
    <div class="sup-label">
      <span v-for="(item, index) in tags" :key="index" class="sup-label-item">
        <el-icon>
          <Check />
        </el-icon>{{ item }}
      </span>
    </div>
    <div v-html="content" class="content"></div>
  </div>
</template>
<script>
import { Check } from '@element-plus/icons-vue'
export default {
  name: 'SearchBar',
  setup() {
    let title = '北京出发-私家团 三亚4日私家小团♥升级1晚亚特兰蒂斯酒店+2晚无边泳池哈曼酒店，一单一车一团，无限次畅玩水世界+水族馆，必玩蜈支洲岛'
    let tags = ['亚特兰蒂斯酒店', '网红无边际泳池', '亚特水世界', '独立用车', '睡到自然醒', '2-8人精品...']
    let sellCount = 225
    let price = 2490
    let childrenPrice = 450
    let content = `<div class="m-richtext reset-padding reset-pseudo-border">
    <div>温馨提示：由于疫情原因，哈曼酒店4月暂停营业，目前暂定于5.1日重新营业，涉及4月团期期间安排哈曼酒店的同级备选酒店，敬请谅解谢谢！
    <br>24小时客服热线：4008-197-688<br>4天3晚套餐包含：（如需要机票可在出发地选择相对应的出发城市即为含往返机票的费用）
    <br>1）、一单一车一团，不与他人拼车，私密舒适
    <br>2）、2晚无边泳池哈曼酒店+升级1晚亚特兰蒂斯酒店（无限次畅玩水世界+水族馆）
    <br>3）、24小时机场专车接送机，随时到随时接送
    <br>4）、专车出行必玩醉美海岛：蜈支洲岛
    <br>5）、赠送精美旅拍，30分钟拍摄含5张电子照片
    <br>6）、赠送酒店首晚蜜月布置
    <br>注：赠送项目需提前跟客服预约，如未预约视为放弃谢谢！
    <br></div>
    <img width="100%" src="https://imgs.qunarzz.com/vs_ceph_vs_tts/4f01d24e-208f-437f-ad52-21723b3c14cd.jpg_r_750x500x90_83d6f494.jpg">
    <img width="100%" src="https://imgs.qunarzz.com/vs_ceph_b2c_001/15163bd6-fa28-454e-8f02-0ced155a4544.jpg">
    <img width="100%" src="https://imgs.qunarzz.com/vs_ceph_b2c_001/e999fc0e-dbf2-4b0c-9cae-90a8e76ea248.jpg">
    <img width="100%" src="https://imgs.qunarzz.com/vs_ceph_b2c_001/802386e0-7893-4d5f-ac6c-3554ba0b7a7b.jpg">
    <img width="100%" src="https://imgs.qunarzz.com/vs_ceph_b2c_001/24c6f41a-dd73-48e6-8a1d-5884954fc1b9.jpg">
    <img width="100%" src="https://imgs.qunarzz.com/vs_ceph_b2c_001/fac245fc-4ddc-4f3b-b0dd-216976de2743.jpg">
    <img width="100%" src="https://imgs.qunarzz.com/vs_ceph_b2c_001/6ce91574-4b84-4fba-b185-db80aa19eb36.jpg">
    <img width="100%" src="https://imgs.qunarzz.com/vs_ceph_b2c_001/5cdaa28f-b2cc-47d5-b22b-30be6114ff57.jpg">
    <img width="100%" src="https://imgs.qunarzz.com/vs_ceph_b2c_001/d1e249e5-b112-4d89-864d-4a631420bc3f.jpg">
    </div>`
    return {
      title,
      content,
      Check,
      tags,
      sellCount,
      price,
      childrenPrice
    }
  }
}
</script>
<style scoped>
.productDetail {
  text-align: left;
  font-size: 14px;
}

.title {
  font-size: 18px;
  margin-bottom: 5px;
  padding: 15px 15px 0;
  background-color: white;
}

.price {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  margin-bottom: 5px;
  background-color: white;
}

.sup-label {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 15px;
  margin-bottom: 15px;
  background-color: white;
}

.sup-label-item {
  display: block;
  height: 20px;
  margin-right: 12px;
}

.content {
  padding: 0 15px;
  margin-bottom: 15px;
  background-color: white;
}

.flexbox {
  display: flex;
}

.cont {
  margin-right: 12px;
}

.yen {
  color: red;
  font-size: 14px;
}

.num {
  color: red;
  font-size: 22px;
}

.per {
  font-size: 14px;
}
</style>